<script setup>
import {ref} from 'vue'
const dynamicDynamic=ref([])
const imgList=ref([])
const showLeft=ref()
const getDynamic=()=>{
	uni.request({
		url: 'http://localhost:3008/dynamicDynamic',
		method: 'GET',
		data: {},
		success: res => {
			dynamicDynamic.value=res.data
		}, 
		fail: () => {},
		complete: () => {}
	});		
}
const getPic=()=>{
		uni.request({
			url: 'http://localhost:3008/dynamicPic',
			method: 'GET',
			data: {},
			success: res => {
				imgList.value=res.data
			}, 
			fail: () => {},
			complete: () => {}
		})		
}
const showDrawer=()=>{
		showLeft.value.open()
}
const closeDrawer=()=>{
     showLeft.value.close()
}
getDynamic()
getPic()
const childrenRef=ref()
const open=()=>{
	childrenRef.value.open('bottom')
}
	
</script>
<template>
	<view class="container"> 
		<view class="header">
			<img src="../../static/更多.png" @click="showDrawer"/>
			<view>
				<ul>
					<li>关注</li>
					<li>广场</li>
				</ul>
			</view>
			<img src="../../static/加号.png" alt="">
		</view>
		
		<view class="banner">
			<img src="../../static/tx.jpg" alt="" />
		</view>
		
		<view class="dynamic" v-for="item in dynamicDynamic">
			<view class="avator">
				<img :src="item.avator"/>
			</view>
			<view class="content">
				<view class="title">
					 <span>{{item.username}}</span>
					 <span>{{item.vipLevel}}</span>
					 <span>{{item.title}}</span></view>
				<view class="recommend">
					{{item.released}}
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view class="content-img">
					<img :src="item.img" v-for="item in imgList"/>
				</view>
				<view class="music">
					<img src="../../static/tx.jpg">
					<view>
						<span>Cruel Summer</span>
						<span>Taylor Swift</span>
					</view>
				</view>
			</view>	
		</view>
		
		<bottomBar @click="open()"></bottomBar>
		<uni-drawer :width="320" mode="left" ref="showLeft" >
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<drawer></drawer>
				</scroll-view>
			</view>
		</uni-drawer>
		<uni-popup ref="childrenRef" background-color="#1b1b23"  type="bottom">
			<popup></popup>
		</uni-popup>
	</view>
</template>



<style scoped>
*{
	margin: 0 auto;
}
.container{
	background-color:#1b1b23;
}
.header{
	color:#fff;
	display: flex;
	justify-content: space-between;
	line-height: 30px;
	margin: 0 5px;
}
.header img{
	width: 30px;
	height: 30px;
	margin: 0px;
}
.header ul{
	list-style: none;
	display: flex;
	padding-left: 0px;
}
.header li{
		margin: auto 10px;
}

.banner{
	margin-top: 20px;
	display: flex;
	justify-content: center;
}
.banner img{
	width: 96%;
	height: 100px;
	border-radius: 10px;
}

.dynamic{
	display: flex;
	color: #fff;
	margin-top: 20px;
	margin-bottom: 50px;
}
.avator{
	margin:5px;
}
.avator img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.content{
	margin-left:5px;
}
.title{
	margin-top: 10px;	
	height: 20px;
	padding: 3px 0 0 3px;
	line-height: 20px;
}
.title span{
	padding: 5px;
}
.title span:nth-child(1){

}
.title span:nth-child(2){
	font-size: 10px;
}
.title span:nth-child(3){
	background-color: #0000ff;
	width: 20%;
	height: 30px;
	border-radius: 20px;
	font-size: 10px;
	padding-top:2px ;
	padding-bottom:2px ;
}
.recommend{
	margin-left: 10px;
	font-size: 10px;
	color: lightgray;
	/* padding: 5px; */
}

.text{
	margin-top: 5px;
	padding-left: 5px;
	width: 80%;
	margin-left: 0px;
}
.content-img{
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	justify-content: left;
	border-radius:20px ;
	margin:10px 0 0 0;

}
.content-img img{
	width: 90px;
	height: 90px;	
	padding: 2px;
	margin:1px;
}
.music{
	margin-top: 10px;
	width: 270px;
	height: 45px;
	display: flex;
	justify-content: flex-start;
	background-color: #272832;
	padding-left: 10px;
	padding-top: 5px;
	border-radius: 10px;
	margin-left: 0px;
}

.music img{
	margin: 0px;
		width: 40px;
		height: 40px;
		border-radius:5px;
}
.music view{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-left: 10px;
}
.music span:nth-child(1){
	margin-top: 3px;
	font-weight:300;
}
.music span:nth-child(2){
	font-weight:300;
	font-size: 10px;
	color: lightgray;
	margin-left: 0;
}
.uni-drawer__content{
	background-color: #151515;
	
}
.uni-drawer__content{
	background-color: #151515;
	
}
.uni-drawer__content--visible img{
	width: 30px;
	height: 30px;
}
</style>
